<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>
<style>
    body {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 100px 0 24px;
    }

    .login-title {
        font-size: 33px;
        line-height: 36px;
        margin-bottom: 40px;
        font-weight: bold;
    }

    .login-con {
        width: 360px;
        height: 400px;
        padding: 16px 26px;
        border-top: 5px solid #1890ff;
        border-bottom: 5px solid #1890ff;
        box-shadow: 0 2px 20px #0000001a;
        background: rgba(255, 255, 255);
        border-radius: 3px;
        overflow: hidden;
        display: flex;
        align-items: center;
        flex-direction: column;
        box-sizing: border-box;
    }

    .form-title {

    }

    .input {
        width: 308px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid #d9d9d9;
        padding: 0 12px;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        border-radius: 2px;
        overflow: hidden;
    }

    .input input {
        flex: 1;
        border: none;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        outline: none;
    }

    .input img {
        width: 80px;
        height: 30px;
    }

    .code {
        font-size: 12px;
        cursor: pointer;
    }

    .btn {
        width: 308px;
        height: 40px;
        color: #fff;
        background: #1890ff;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        overflow: hidden;
        cursor: pointer;
    }
</style>
<body style="background-image: url('login_back.png');background-size: cover">
<div class="login-title" id="login-title">
    管理系统
</div>
<div class="login-con">
    <h3 class="form-title">账号密码登录</h3>
    <div class="input">
        <input id="account" autocomplete="off" type="text" onblur="getPicCode()" placeholder="用户名"/>
    </div>
    <div class="input">
        <input id="picCode" autocomplete="off" type="text" placeholder="图形验证码"/>
        <img id="picCodeImage" alt="" onclick="getPicCode()"/>
    </div>
    <div class="input">
        <input id="msgCode" autocomplete="off" type="text" placeholder="短信验证码"/>
        <div id="msgCodeBtn" class="code" onclick="getMsgCode()">获取验证码</div>
    </div>
    <div class="input">
        <input id="password" type="password" placeholder="密码"/>
    </div>
    <div class="btn" onclick="login()">登录</div>
</div>

</body>
<script src="/app.js"></script>
<script src="/jquery-3.5.1.min.js"></script>
<script src="/url.js"></script>
<script>

    init()
    function init(){
        document.getElementById('login-title').textContent = eruptSiteConfig.title;
    }

    function getPicCode() {
        let account = $("#account").val();
        if (account == '') {
            return;
        }
        let url = requestUrl + "/erupt-api/login/getPicCode";
        $.ajax({
            type: "POST",
            url: url,
            headers: {},
            data: {
                account: account,
            },
            datatype: "json",
            success: function (result) {
                console.log(result)
                if (result.code == 1) {
                    document.getElementById('picCodeImage').src = 'data:image/png;base64,' + result.data.picCode;
                } else {
                    if (result.message != undefined) {
                        alert(result.message)
                    } else if (result.msg != undefined) {
                        alert(result.msg)
                    }
                }
            }
        });
    }

    let s = 60;

    function getMsgCode() {
        if (s != 60) {
            return;
        }
        let account = $("#account").val();
        let picCode = $("#picCode").val();
        if (account == '') {
            alert('请输入账号')
            return;
        }
        if (picCode == '') {
            alert('请输入图形验证码')
            return;
        }
        let url = requestUrl + "/erupt-api/login/getMsgCode";
        $.ajax({
            type: "POST",
            url: url,
            headers: {},
            data: {
                account: account,
                picCode: picCode,
            },
            datatype: "json",
            success: function (result) {
                console.log(result)
                if (result.code == 1) {
                    let timer = setInterval(function () {
                        s--;
                        let name = s + "s后获取";
                        console.log(name)
                        document.getElementById('msgCodeBtn').innerHTML = name
                        if (s < 1) {
                            s = 60;
                            document.getElementById('msgCodeBtn').innerHTML = '获取验证码'
                            clearInterval(timer);
                        }
                    }, 1000);
                } else {
                    if (result.message != undefined) {
                        alert(result.message)
                    } else if (result.msg != undefined) {
                        alert(result.msg)
                    }
                }
            }
        });
    }

    function login() {
        let account = $("#account").val();
        let msgCode = $("#msgCode").val();
        let password = $("#password").val();
        if (account == '') {
            alert('请输入账号')
            return;
        }
        if (msgCode == '') {
            alert('请输入短信验证码')
            return;
        }
        if (password == '') {
            alert('请输入密码')
            return;
        }
        let url = requestUrl + "/erupt-api/login?account=" + account + "&pwd=" + password + "&msgCode=" + msgCode;
        $.ajax({
            type: "GET",
            url: url,
            headers: {},
            success: function (result) {
                console.log(result)
                if (result.pass) {
                    window.open(requestUrl + "/auth.html?token=" + result.token, '_self')
                } else {
                    alert(result.reason)
                }
            }
        });
    }
</script>


</html>
